<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '共读记录',
	},
}
</route>

<template>
	<view class="page-bookrack">
		<fly-navbar backgroundColor="#F6F6F6" leftText="共读记录" fixed />
		<view class="w-full flex flex-col box-border" :style="{ height: contentHeight + 'rpx' }">
			<view class="w-full px-4 h-[128rpx] box-border flex justify-between items-center">
				<view
					class="text-[36rpx] w-[50%] text-center relative font-bold"
					:style="{ color: tabKey === item.type ? '#34A4E2' : '#303030' }"
					@tap="changeTab(item.type)"
					v-for="item in tabList"
					:key="item.type"
				>
					{{ item.des }}<text class="text-[24rpx] font-bold">({{ item.count }})</text>
					<text
						v-if="tabKey === item.type"
						class="w-[29rpx] h-[10rpx] rounded-[5rpx] absolute left-[50%] -translate-x-[50%] -bottom-[10rpx]"
						style="background: #34a4e2"
					></text>
				</view>
			</view>
			<view class="w-full flex-1 pb-3 box-border" style="height: calc(100% - 128rpx)">
				<scroll-view
					class="w-full h-full box-border"
					scroll-y
					v-if="thisPage === 1 && classInfo.list.length"
					@scrolltolower="scrolltolower"
				>
					<view
						class="w-full px-4 box-border mb-3 last:mb-0"
						v-for="item in classInfo.list"
						:key="item.id"
						@tap="toDetails(item.id)"
					>
						<view
							class="bg-white rounded-[30rpx] px-3 py-4 w-full box-border flex justify-between flex-col relative"
						>
							<view class="w-full">
								<view class="w-full flex items-center">
									<image
										class="w-[36rpx] h-[36rpx]"
										:src="baseImg + '/class/class-time.png'"
									></image>
									<text class="text-[22rpx] text-[#303030] ml-1"
										>{{ item.startTime }}-{{ item.endTime }}</text
									>
								</view>
								<view class="text-[29rpx] text-[#303030] mt-2">{{ item.title }}</view>
							</view>
							<text
								class="text-[25rpx] text-[#fff] absolute right-0 top-[16rpx] py-1 px-2 rounded-lt-[30rpx] rounded-lb-[30rpx]"
								:style="{ background: '#34A4E2' }"
								>{{ item.type === 3 ? '班级共读计划' : '平台共读计划' }}</text
							>
							<view class="w-full flex justify-between items-center mt-6">
								<view class="flex items-center">
									<text class="text-[25rpx] text-[#34A4E2]"
										>{{ item.join_total || 0 }}人已参与</text
									>
									<text class="text-[25rpx] text-[#919191] ml-4"
										>{{ item.no_total || 0 }}人待参与</text
									>
								</view>
								<view class="flex items-center" v-if="item.user_avatar?.length">
									<image
										v-for="cited in item.user_avatar"
										:key="cited.avatar"
										:src="cited.avatar || baseImg + '/user-default.png'"
										class="w-[48rpx] h-[48rpx] rounded-[50%] ml-2 border-1 border-solid border-[#f1f1f1]"
									></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<no-page
					v-if="thisPage === 0 || (thisPage === 1 && !classInfo.list.length)"
					height="100%"
					:type="thisPage === 0 ? 'btn' : 'msg'"
					:title="title"
					@click="retry"
				></no-page>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';
import { getPlanRecordList } from '@/service/user';
import { formatTime } from '@/utils/index';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { contentHeight } = systemInfo();
const tabList = ref([
	{
		count: 0,
		des: '进行中',
		type: 1,
	},
	{
		count: 0,
		des: '已完成',
		type: 2,
	},
]);
const tabKey = ref(1); // over
const classInfo = ref({
	list: [],
	start_num: 0,
	close_num: 0,
});
const title = ref('');
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);

onShow(() => {
	getList();
});
const scrolltolower = () => {
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};

const changeTab = (key: number) => {
	hasMore.value = true;
	classInfo.value.list = [];
	page.value.number = 1;
	tabKey.value = key;
	getList();
};
const getList = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getPlanRecordList({
			type: tabKey.value,
			page: page.value.number,
			page_size: page.value.size,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			res.data.list.forEach(item => {
				item.startTime = formatTime(item.start_time, '年月日', false);
				item.endTime = formatTime(item.end_time, '年月日', false);
			});
			classInfo.value = {
				list: page.value.number === 1 ? res.data.list : [...classInfo.value.list, ...res.data.list],
				start_num: res.data.start_total,
				close_num: res.data.end_total,
			};
			tabList.value[0].count = res.data.start_total;
			tabList.value[1].count = res.data.end_total;
			if (res.data.list.length < page.value.size) {
				hasMore.value = false;
			}
			if (!classInfo.value.list.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const toDetails = (id: number) => {
	if (!id) return;
	uni.navigateTo({
		url: `/pages-plan/details/index?id=${id}`,
	});
};

const retry = () => {
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}

.plan-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}
</style>
